<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="800px"
    append-to-body
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="200px"
        label-position="right"
      >
        <el-col :span="24">
          <el-form-item label="直播场次名称" prop="sitename">
            <el-input
              v-model="dataForm.sitename"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="直播开始时间" prop="starttime">
            <el-date-picker
              v-model="dataForm.starttime"
              type="datetime"
              default-time="12:00:00"
              placeholder="请选择直播开始时间"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="直播时长" prop="duration">
            <el-input-number
              v-model="dataForm.duration"
              placeholder="请选择直播时长"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"
        >保 存</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
export default {
  name: "abc",
  props: {
    dataFormId: {
      type: [Number, String],
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      visible: false,
      activeName: "",
      dataForm: {
        sitename: "",
        starttime: "",
        duration: ""
      },
      btnLoading: false,
      rules: {
        sitename: [
          { required: true, message: "请输入直播场次名称", trigger: "blur" }
        ],
        starttime: [
          { required: true, message: "请选择直播开始时间", trigger: "change" }
        ],
        duration: [
          { required: true, message: "请选择直播时长", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    init(row) {
      this.visible = true;
      console.log(row, 111111);
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (row) {
          this.dataForm = Object.assign({}, row);
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          let form = {};
          if (this.dataForm.id) {
            this.list.forEach(item => {
              if (item.id == this.dataForm.id) {
                item.sitename = this.dataForm.sitename;
                item.starttime = this.dataForm.starttime;
                item.duration = this.dataForm.duration;
              }
            });
            form.xy_zb_siteEntityList = this.list;
          } else {
            form.xy_zb_siteEntityList = this.list;
            form.xy_zb_siteEntityList.push(this.dataForm);
          }
          this.btnLoading = true;
          request({
            url: "/api/xy_zb_base_info/Xy_zb_base_info/" + this.dataFormId,
            method: "PUT",
            data: form
          }).then(res => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000
            });
            this.visible = false;
            this.$emit("refresh", true);
            this.btnLoading = false;
          });
        }
      });
    }
  }
};
</script>
<style scoped lang="less"></style>
